<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.example.admanagement.Ad" %>
<%@ page import="com.example.admanagement.AdService" %>
<%@ page import="com.example.admanagement.AdService.Result" %>
<html>
<head>
    <title>项目列表</title>
    <link rel="stylesheet" href="../css/nav.css" />
    <link rel="stylesheet" href="../css/content.css" />
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../css/shouye_fenlei.css">
    <link rel="stylesheet" href="../css/ad_display.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        // 页面加载后使用 AJAX 获取项目数据
        $(document).ready(function() {
            // 请求项目数据
            $.ajax({
                url: '../ServiceListServlet',  // 后端 Servlet 地址
                type: 'GET',
                dataType: 'json',  // 响应数据格式
                success: function(data) {
                    // 清空当前项目列表
                    var ul = $(".shouye ul");
                    ul.empty();

                    // 遍历获取的数据并动态生成列表项
                    data.forEach(function(service) {
                        var listItem = "<li data-id='" + service.id + "'>" +
                            "<a href='xiangmu.jsp?id=" + service.id + "'>" +  <!-- 这里加了 a 标签 -->
                            "<div class='project'>" +
                            "<img src='../" + service.image + "' alt='" + service.name + "' width='250' height='250'>" +
                            "<div class='project-info'>" +
                            "<p class='project-name'>" + service.name + "</p>" +
                            "<p class='project-price'>" + service.price + "元</p>" +
                            "</div>" +
                            "</div>" +
                            "</a>" +
                            "</li>";


                        ul.append(listItem);
                    });
                },
                error: function(xhr, status, error) {
                    console.log("请求失败: " + status + ", 错误信息: " + error);
                }
            });
        });
    </script>
</head>
<body>
<button class="reset-ad-btn" onclick="resetAdClosed()">重置广告</button>
<jsp:include page="nav.jsp"/>

<div class="fenlei">
    <p>分类：</p>
    <input class="fenlei_btn" type="button" value="全部"/>
    <input class="fenlei_btn" type="button" value="美甲"/>
    <input class="fenlei_btn" type="button" value="美容"/>
</div>

<div class="shouye">
    <a href="#"><input class="btn" type="button" value="最新"/></a>
    <input class="btn" type="button" value="最热"/>
    <br />
    <ul>
        <!-- 这里的项目列表会通过 AJAX 动态加载 -->
    </ul>
</div>

<!-- 广告弹窗 -->
<div id="ad-popup" class="ad-popup">
    <%
        AdService.Result<List<Ad>> result = AdService.getAdsFromDatabase();
        List<Ad> adList = null; // 先在外层定义adList变量
        if (result.isSuccess()) {
            adList = result.getData();
            if (adList!= null && adList.size() > 0) { // 修改此处判断条件，确保adList不为空且有元素
                Ad firstAd = adList.get(0);
    %>
    <div class="ad-popup-content">
        <img src="<%= firstAd.getImagePath() %>" alt="<%= firstAd.getTitle() %>">
        <h2 class="ad-popup-title"><%= firstAd.getTitle() %></h2>
        <a class="ad-popup-link" href="<%= firstAd.getLink() %>"><%= firstAd.getLink() %></a>
        <p class="ad-popup-description"><%= firstAd.getDescription() %></p>
    </div>
    <div class="ad-popup-buttons">
        <span class="ad-popup-close" onclick="closeAdPopup()">关闭</span>
        <span class="ad-popup-never-show" onclick="neverShowAdPopup()">不再显示</span>
    </div>
    <%
            }
        }
    %>
</div>

<!-- 遮罩层 -->
<div id="overlay" class="overlay"></div>

<script>

    function resetAdClosed() {
        localStorage.removeItem('adClosed'); // 直接删除该键值对，下次页面加载就会重新显示广告弹窗
        // 或者也可以设置为其他特定的值，比如
        // localStorage.setItem('adClosed', 'temp');
    }

    // 页面加载时检查广告是否已关闭
    window.onload = function () {
        const isAdClosed = localStorage.getItem('adClosed');
        if (isAdClosed!== 'forever') {
            showAdPopup();
        }
    };

    // 显示广告弹窗和遮罩层
    function showAdPopup() {
        const adPopup = document.getElementById('ad-popup');
        const overlay = document.getElementById('overlay');
        adPopup.style.display = "block";
        overlay.style.display = "block";
    }

    // 关闭广告弹窗和遮罩层，并记录本次关闭状态（仅本次刷新不再显示）
    function closeAdPopup() {
        const adPopup = document.getElementById('ad-popup');
        const overlay = document.getElementById('overlay');
        adPopup.style.display = "none";
        overlay.style.display = "none";
        localStorage.setItem('adClosed', 'temp');
    }

    // 关闭广告弹窗并设置为以后都不再显示
    function neverShowAdPopup() {
        const adPopup = document.getElementById('ad-popup');
        const overlay = document.getElementById('overlay');
        adPopup.style.display = "none";
        overlay.style.display = "none";
        localStorage.setItem('adClosed', 'forever');
    }
</script>

</body>
</html>
